<template>
<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2" id="sidebar">
      <nav id="sidebar-nav" class="collapse show">
        <ul class="nav">
          <li class="nav-item">
            <router-link active-class="active" class="nav-link" :to="$toLocale('/examples/full')">{{$t('example.full')}}</router-link>
          </li>
          <li class="nav-item">
            <router-link active-class="active" class="nav-link" :to="$toLocale('/examples/simple')">{{$t('example.simple')}}</router-link>
          </li>
          <li class="nav-item">
            <router-link active-class="active" class="nav-link" :to="$toLocale('/examples/avatar')">{{$t('example.avatar')}}</router-link>
          </li>
          <li class="nav-item">
            <router-link active-class="active" class="nav-link" :to="$toLocale('/examples/drag')">{{$t('example.drag')}}</router-link>
          </li>
          <li class="nav-item">
            <router-link active-class="active" class="nav-link" :to="$toLocale('/examples/multiple')">{{$t('example.multiple')}}</router-link>
          </li>
          <li class="nav-item">
            <router-link active-class="active" class="nav-link" :to="$toLocale('/examples/chunk')">{{$t('example.chunk')}}</router-link>
          </li>
          <li class="nav-item">
            <router-link active-class="active" class="nav-link" :to="$toLocale('/examples/vuex')">{{$t('example.vuex')}}</router-link>
          </li>
          <li class="nav-item">
            <router-link active-class="active" class="nav-link" :to="$toLocale('/examples/typescript')">{{$t('example.typescript')}}</router-link>
          </li>
          <li class="nav-item">
            <router-link active-class="active" class="nav-link" :to="$toLocale('/examples/asyncevents')">{{$t('example.asyncevents')}}</router-link>
          </li>
        </ul>
      </nav>
    </div>
    <main class="col-12 col-md-9 col-xl-10 py-md-3 pr-md-5 pl-md-5" id="main" role="main"><router-view></router-view></main>
  </div>
</div>
</template>
